<template>
  <el-container class="layout-container">
    <!-- 侧边栏 -->
    <el-aside :width="sidebarWidth">
      <div class="sidebar-header">
        <h1 v-if="!collapsed">微服务管理</h1>
        <h1 v-else>MS</h1>
      </div>
      <el-menu
        :default-active="currentPath"
        :collapse="collapsed"
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#409EFF"
        router
      >
        <el-menu-item index="/dashboard">
          <i class="el-icon-s-home"></i>
          <span slot="title">仪表盘</span>
        </el-menu-item>
        <el-menu-item index="/user">
          <i class="el-icon-user"></i>
          <span slot="title">用户管理</span>
        </el-menu-item>
        <el-menu-item index="/order">
          <i class="el-icon-s-order"></i>
          <span slot="title">订单管理</span>
        </el-menu-item>
        <el-menu-item index="/product">
          <i class="el-icon-goods"></i>
          <span slot="title">商品管理</span>
        </el-menu-item>
        <el-menu-item index="/payment">
          <i class="el-icon-bank-card"></i>
          <span slot="title">支付管理</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 主内容区 -->
    <el-container>
      <!-- 顶部导航 -->
      <el-header>
        <div class="header-left">
          <i 
            :class="collapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold'" 
            @click="toggleSidebar"
          ></i>
        </div>
        <div class="header-right">
          <el-dropdown @command="handleCommand">
            <span class="user-info">
              <i class="el-icon-user-solid"></i>
              {{ username }}
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>

      <!-- 内容区 -->
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'Layout',
  data() {
    return {
      collapsed: false
    };
  },
  computed: {
    currentPath() {
      return this.$route.path;
    },
    sidebarWidth() {
      return this.collapsed ? '64px' : '200px';
    },
    username() {
      return this.$store.state.user?.username || '管理员';
    }
  },
  methods: {
    toggleSidebar() {
      this.collapsed = !this.collapsed;
      this.$store.commit('TOGGLE_SIDEBAR');
    },
    handleCommand(command) {
      if (command === 'logout') {
        this.$confirm('确定要退出登录吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('logout');
          this.$router.push('/login');
          this.$message.success('退出登录成功');
        });
      }
    }
  }
};
</script>

<style scoped>
.layout-container {
  height: 100vh;
}

.el-aside {
  background-color: #304156;
  transition: width 0.3s;
  overflow-x: hidden;
}

.sidebar-header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2b3a4a;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

.sidebar-header h1 {
  margin: 0;
  font-size: 20px;
}

.el-menu {
  border: none;
}

.el-header {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
}

.header-left i {
  font-size: 24px;
  cursor: pointer;
  color: #5a5e66;
}

.header-right {
  display: flex;
  align-items: center;
}

.user-info {
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #5a5e66;
}

.user-info i {
  margin-right: 5px;
  font-size: 18px;
}

.el-main {
  background-color: #f0f2f5;
  padding: 20px;
}
</style>
